<template>
  <a-tooltip
      v-if="tooltip"
      effect="light"
      :content="text"
      :style="{opacity: opacity}"
      placement="top"
  >
    <span>{{ ellipsised }}</span>
  </a-tooltip>
  <span v-if="!tooltip" :style="{opacity: opacity}">{{ text }}</span>
</template>

<script>
export default {
  name: "ellipsis", // 超出制定长度显示为省略号，并且悬停显示tootip
  props: {
    text: String,
    length: Number,
    opacity: {type: Number, default: 1},
  },
  data() {
    return {
      tooltip: false,
      ellipsised: null
    }
  },
  created() {
    if (this.text.length > (this.length || 0)) {
      this.tooltip = true;
      this.ellipsised = this.text.slice(0, this.length) + '…';
    } else {
      this.tooltip = false;
      this.ellipsised = this.text;
    }
  }
}
</script>

<style scoped>

</style>
